<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--
        <ul>
            <li v-for="(item,index) in persons">
                <span>{{item.name}}</span>
                <input type="text">
            </li>
        </ul>
    -->
    <ul>
        <li v-for="(item,index) in persons" :key="item.id">
            <span>{{item.name}}</span>
            <input type="text">
        </li>
    </ul>
    <button @click="handler">点击</button>
</div>
<script src="../../JavaScript/vue.js"></script>
<script>
    /*
    key属性：key 这个特殊的 attribute 主要作为 Vue 的虚拟 DOM 算法提示，在比较新旧节点列表时用于识别 vnode。
    预期：number | string | symbol
    在没有 key 的情况下，Vue 将使用一种最小化元素移动的算法，并尽可能地就地更新/复用相同类型的元素。如果传了 key，则将根据 key 的变化顺序来重新排列元素，并且将始终移除/销毁 key 已经不存在的元素。
    同一个父元素下的子元素必须具有唯一的 key。重复的 key 将会导致渲染异常

    vue中列表循环需要加:key='唯一标识'，唯一标识尽量是id，目的是为了高效地更新虚拟DOM
    key主要用于dom diff算法，diff算法为同级比较，比较当前标签上的key还有他当前的标签名，如果key和标签名都一样时只移动，不会重新创建元素和删除元素
    没有key地时候默认使用就地复用策略。如果数据的顺序被改变，vue不是移动DOM元素来匹配数据项的改变，而是简单复用原来位置的每个元素，在进行比较时发现标签一样值不一样时，就会复用之前的位置，将新值直接放到该位置，以此类推，最后多出一个就会把最后一个删除掉。
    尽量不要使用索引值index作key值，一定要用唯一标识的值，如id等。因为若用数组索引index为key，当向数组中指定位置插入一个新元素后，因为这时候会重新更新index索引，对应着后面的虚拟DOM的key值全部更新了，这个时候还是会做不必要的更新，就像没有加key一样，因此index虽然能够解决key不冲突的问题，但是并不能解决复用的情况。如果是静态数据，用索引号index做key值是没有问题的

    */
    const app = Vue.createApp({
        data() {
            return {
                persons: [
                    {id: 1, name: "马化腾", age: 22},
                    {id: 2, name: "马斯克", age: 23},
                    {id: 3, name: "马宝国", age: 24},
                ]
            }
        },
        methods: {
            handler() {
                this.persons.unshift({id: 4, name: "马宝宝", age: 25})
            }
        }
    })
    app.mount("#app")
</script>
</body>
</html>